<template>
    <div class="produce-material-page">
        <el-card>
            <div class="header-bar">
                <span class="title">生产领料管理</span>
                <el-input v-model="search.keyword" placeholder="单号/工单/客户/仓库" size="small"
                    style="width:200px;margin-right:10px;" clearable />
                <el-select v-model="search.status" placeholder="状态" size="small" style="width:120px;margin-right:10px;"
                    clearable>
                    <el-option v-for="s in statusOptions" :key="s.value" :value="s.value" :label="s.label" />
                </el-select>
                <el-button type="primary" size="small" @click="onAdd">新增领料单</el-button>
            </div>
            <el-table :data="filteredList" border style="width:100%;margin-top:8px;">
                <el-table-column prop="materialCode" label="领料单号" width="120" />
                <el-table-column prop="workOrder" label="生产工单" min-width="120" />
                <el-table-column prop="customer" label="客户" min-width="100" />
                <el-table-column prop="warehouse" label="仓库" min-width="90" />
                <el-table-column prop="material" label="物料" min-width="120" />
                <el-table-column prop="quantity" label="数量" width="70" />
                <el-table-column prop="date" label="日期" width="100" />
                <el-table-column prop="status" label="状态" width="100">
                    <template #default="{ row }">
                        <el-tag :type="row.status === '已领料' ? 'success' : row.status === '待领料' ? 'info' : 'warning'"
                            size="small">{{ row.status }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注" min-width="120" />
                <el-table-column label="操作" width="180" fixed="right">
                    <template #default="{ row }">
                        <el-button size="small" type="info" link @click="onEdit(row)">编辑</el-button>
                        <el-button size="small" type="danger" link @click="onDelete(row)">删除</el-button>
                        <el-button size="small" type="primary" link v-if="row.status === '待领料'"
                            @click="onReceive(row)">领料</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 新增/编辑弹窗 -->
        <el-dialog v-model="editDialog.visible" :title="editDialog.isEdit ? '编辑领料单' : '新增领料单'" width="450px">
            <el-form :model="editDialog.form" label-width="90px">
                <el-form-item label="领料单号">
                    <el-input v-model="editDialog.form.materialCode" />
                </el-form-item>
                <el-form-item label="生产工单">
                    <el-input v-model="editDialog.form.workOrder" />
                </el-form-item>
                <el-form-item label="客户">
                    <el-input v-model="editDialog.form.customer" />
                </el-form-item>
                <el-form-item label="仓库">
                    <el-input v-model="editDialog.form.warehouse" />
                </el-form-item>
                <el-form-item label="物料">
                    <el-input v-model="editDialog.form.material" />
                </el-form-item>
                <el-form-item label="数量">
                    <el-input-number v-model="editDialog.form.quantity" :min="1" />
                </el-form-item>
                <el-form-item label="日期">
                    <el-date-picker v-model="editDialog.form.date" type="date" value-format="YYYY-MM-DD"
                        style="width: 100%;" />
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="editDialog.form.status">
                        <el-option v-for="s in statusOptions" :key="s.value" :value="s.value" :label="s.label" />
                    </el-select>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="editDialog.form.remark" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="editDialog.visible = false">取消</el-button>
                <el-button type="primary" @click="onSaveEdit">保存</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const statusOptions = [
    { label: '待领料', value: '待领料' },
    { label: '已领料', value: '已领料' },
    { label: '异常', value: '异常' },
]

const search = reactive({ keyword: '', status: '' })

// 15条医药行业模拟领料单
const materialList = ref([
    { materialCode: 'MAT20240601', workOrder: 'WO20240501', customer: '江苏医药', warehouse: '1号库', material: '阿莫西林原料', quantity: 1000, date: '2024-06-01', status: '已领料', remark: '正常' },
    { materialCode: 'MAT20240602', workOrder: 'WO20240502', customer: '北京同仁堂', warehouse: '2号库', material: '氯化钠注射液', quantity: 600, date: '2024-06-01', status: '已领料', remark: '无异常' },
    { materialCode: 'MAT20240603', workOrder: 'WO20240503', customer: '上海医药', warehouse: '3号库', material: '青霉素钠', quantity: 700, date: '2024-06-02', status: '待领料', remark: '' },
    { materialCode: 'MAT20240604', workOrder: 'WO20240504', customer: '扬子江药业', warehouse: '1号库', material: '维生素C', quantity: 500, date: '2024-06-02', status: '待领料', remark: '' },
    { materialCode: 'MAT20240605', workOrder: 'WO20240505', customer: '石药集团', warehouse: '2号库', material: '地塞米松', quantity: 300, date: '2024-06-03', status: '已领料', remark: '' },
    { materialCode: 'MAT20240606', workOrder: 'WO20240506', customer: '国药控股', warehouse: '3号库', material: '甲硝唑注射液', quantity: 950, date: '2024-06-03', status: '异常', remark: '数量异常' },
    { materialCode: 'MAT20240607', workOrder: 'WO20240507', customer: '恒瑞医药', warehouse: '1号库', material: '葡萄糖注射液', quantity: 450, date: '2024-06-03', status: '待领料', remark: '' },
    { materialCode: 'MAT20240608', workOrder: 'WO20240508', customer: '齐鲁制药', warehouse: '2号库', material: '头孢曲松钠', quantity: 400, date: '2024-06-04', status: '已领料', remark: '紧急补货' },
    { materialCode: 'MAT20240609', workOrder: 'WO20240509', customer: '正大天晴', warehouse: '3号库', material: '左氧氟沙星', quantity: 350, date: '2024-06-04', status: '待领料', remark: '' },
    { materialCode: 'MAT20240610', workOrder: 'WO20240510', customer: '丽珠医药', warehouse: '1号库', material: '环磷酰胺', quantity: 280, date: '2024-06-05', status: '已领料', remark: '' },
    { materialCode: 'MAT20240611', workOrder: 'WO20240511', customer: '太极集团', warehouse: '2号库', material: '氨苄西林', quantity: 370, date: '2024-06-05', status: '异常', remark: '客户投诉' },
    { materialCode: 'MAT20240612', workOrder: 'WO20240512', customer: '天士力控股', warehouse: '3号库', material: '硫酸庆大霉素', quantity: 360, date: '2024-06-05', status: '待领料', remark: '' },
    { materialCode: 'MAT20240613', workOrder: 'WO20240513', customer: '哈药集团', warehouse: '1号库', material: '甲氨蝶呤', quantity: 220, date: '2024-06-06', status: '待领料', remark: '' },
    { materialCode: 'MAT20240614', workOrder: 'WO20240514', customer: '东阿阿胶', warehouse: '2号库', material: '盐酸多巴胺', quantity: 190, date: '2024-06-06', status: '已领料', remark: '加急领用' },
    { materialCode: 'MAT20240615', workOrder: 'WO20240515', customer: '白云山制药', warehouse: '3号库', material: '阿奇霉素', quantity: 460, date: '2024-06-07', status: '已领料', remark: '' },
])

const filteredList = computed(() => {
    return materialList.value.filter(m =>
        (!search.status || m.status === search.status) &&
        (!search.keyword ||
            m.materialCode.includes(search.keyword) ||
            m.workOrder.includes(search.keyword) ||
            m.customer.includes(search.keyword) ||
            m.warehouse.includes(search.keyword)
        )
    )
})

const editDialog = reactive({
    visible: false,
    isEdit: false,
    form: { materialCode: '', workOrder: '', customer: '', warehouse: '', material: '', quantity: 1, date: '', status: '待领料', remark: '' }
})

function onAdd() {
    Object.assign(editDialog.form, { materialCode: '', workOrder: '', customer: '', warehouse: '', material: '', quantity: 1, date: '', status: '待领料', remark: '' })
    editDialog.isEdit = false
    editDialog.visible = true
}
function onEdit(row) {
    Object.assign(editDialog.form, { ...row })
    editDialog.isEdit = true
    editDialog.visible = true
}
function onSaveEdit() {
    if (!editDialog.form.materialCode || !editDialog.form.workOrder || !editDialog.form.customer) {
        ElMessage.warning('请填写完整信息')
        return
    }
    if (editDialog.isEdit) {
        const idx = materialList.value.findIndex(v => v.materialCode === editDialog.form.materialCode)
        if (idx !== -1) Object.assign(materialList.value[idx], editDialog.form)
    } else {
        if (materialList.value.some(v => v.materialCode === editDialog.form.materialCode)) {
            ElMessage.warning('领料单号重复')
            return
        }
        materialList.value.push({ ...editDialog.form })
    }
    editDialog.visible = false
}
function onDelete(row) {
    const idx = materialList.value.findIndex(v => v.materialCode === row.materialCode)
    if (idx !== -1) materialList.value.splice(idx, 1)
}
function onReceive(row) {
    row.status = '已领料'
    ElMessage.success('已完成领料')
}
</script>

<style scoped>
.produce-material-page {
    padding: 28px 38px 30px 38px;
    min-height: 100vh;
    background: #fff;
}

.header-bar {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
    gap: 10px;
}

.header-bar .title {
    font-size: 1.18rem;
    font-weight: 600;
    margin-right: 28px;
}
</style>
